<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>viewBox</title>
</head>

<body>
        <div class="github">
                <a href="https://github.com/zhansingsong/svg-tutorials" class="github-corner"
                    aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
                        style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
                        aria-hidden="true">
                        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                        <path
                            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                            fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                        <path
                            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                            fill="currentColor" class="octo-body"></path>
                    </svg></a>
                <style>
                    .github-corner:hover .octo-arm {
                        animation: octocat-wave 560ms ease-in-out
                    }
    
                    @keyframes octocat-wave {
    
                        0%,
                        100% {
                            transform: rotate(0)
                        }
    
                        20%,
                        60% {
                            transform: rotate(-25deg)
                        }
    
                        40%,
                        80% {
                            transform: rotate(10deg)
                        }
                    }
    
                    @media (max-width:500px) {
                        .github-corner:hover .octo-arm {
                            animation: none
                        }
    
                        .github-corner .octo-arm {
                            animation: octocat-wave 560ms ease-in-out
                        }
                    }
                </style>
            </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
            font-size: 30px;
        }

        .svg-container {
            margin: 60px auto 0;
            position: relative;
            height: 600px;
            width: 600px;
            /* background-color: aliceblue; */
            background: url(%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTgwIiBoZWlnaHQ9IjU4MCIgdmlld0Jv%0D%0AeD0iMCAwIDU4MCA1ODAiPgo8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAg%0D%0AICBmaWxsOiAjOTk5OwogICAgICB9CiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogIzI4Mjgy%0D%0AODsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgICAgIDxyZWN0ICBjbGFzcz0iY2xz%0D%0ALTIiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz4KICA8cmVjdCBpZD0i55+p5b2iXzEiIGRh%0D%0AdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+%0D%0ACiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nSIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0i%0D%0AIGNsYXNzPSJjbHMtMSIgeT0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzIiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDIiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB5PSI1NzAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgogIDxyZWN0%0D%0AIGlkPSLnn6nlvaJfMV/mi7fotJ1fMyIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0gMyIgY2xh%0D%0Ac3M9ImNscy0xIiB4PSIyODUiIHk9IjU3MCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+CiAgPHJl%0D%0AY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA0IiBj%0D%0AbGFzcz0iY2xzLTEiIHg9IjI4NSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8%0D%0AcmVjdCBpZD0i55+p5b2iXzFf5ou36LSdXzgiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDgi%0D%0AIGNsYXNzPSJjbHMtMSIgeD0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzUiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDUiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p%0D%0A5b2iXzFf5ou36LSdXzYiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDYiIGNsYXNzPSJjbHMt%0D%0AMSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p5b2iXzFf%0D%0A5ou36LSdXzciIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDciIGNsYXNzPSJjbHMtMSIgeD0i%0D%0ANTcwIiB5PSIyODUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgo8L3N2Zz4K) no-repeat center;
            border: 1px solid rgb(184, 203, 214);
            transform: translateZ(0);
        }

        .controls {
            position: fixed;
            padding: 10px;
            top: 120px;
            left: 50%;
            margin-left: 320px;
        }

        .controls h4 {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .controls input {
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .svg{
            position: relative;
            left: 10px;
            top: 10px;
            height: 580px;
            width: 580px;
            transform: translateZ(0);
        }
        svg rect {
            /* fill: #4CAF50; */
        }
        .intro{
            position: relative;
            width: 600px;
            margin: 40px auto 0;
            line-height: 26px;
        }
        .intro p {
            margin-bottom: 20px;
        }
        .intro img{
            vertical-align: bottom;
        }
        .intro strong{
            color: brown;
            font-size: 20px;
            margin-right: 20px;
        }
        .intro strong:last-child{
            margin-right: 0;
        }
        .intro i{
            font-style: italic;
            font-weight: 700;
        }
        .svg-vb{
            background-color: rgba(222, 10, 242, 0.5);
            height: 200px;
            width: 200px;
            position: absolute;
            top: 10px;
            left: 10px;
            text-align: center;
            border-width: 1px;
            border-style: solid;
            border-color: transparent rgb(79, 195, 247) rgb(79, 195, 247) transparent;
            background: rgba(255, 255, 255, 0.3);
            box-sizing: border-box;
        }
        .svg-vb i{
            position: absolute;
            font-size: 20px;
            color: rgb(79, 195, 247);
            line-height: 20px;
            bottom: 2px;
            right: 2px;
        }
        .svg-rect {
            /* background-color: #8BC34A; */
            height: 200px;
            width: 200px;
            background: url('%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0Jv%0D%0AeD0iMCAwIDIwMCAyMDAiPgo8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAg%0D%0AICBmb250LXNpemU6IDEycHg7CiAgICAgICAgZmlsbDogIzRDQUY1MDsKICAgICAgICBmb250LWZh%0D%0AbWlseTogIkFkb2JlIEhlaXRpIFN0ZCI7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAg%0D%0AZmlsbDogI2U0MDA3ZjsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyZWN0IGlkPSJpbWFnZSIg%0D%0AIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iIzRDQUY1MCIvPgogICAgPHJlY3QgaWQ9Imlt%0D%0AYWdlLTIiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNlOGY1ZTkiLz4KICA8L2RlZnM+%0D%0ACiAgPHVzZSBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhsaW5rOmhyZWY9IiNp%0D%0AbWFnZSIvPgogIDx1c2UgaWQ9IuWbvuWxgl8xX+aLt+i0nSIgZGF0YS1uYW1lPSLlm77lsYIgMSDm%0D%0Ai7fotJ0iIHg9IjEwMCIgeGxpbms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzFf%0D%0A5ou36LSdXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEg5ou36LSdIDIiIHg9IjUwIiB5PSI1MCIgeGxp%0D%0Abms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzFf5ou36LSdXzMiIGRhdGEtbmFt%0D%0AZT0i5Zu+5bGCIDEg5ou36LSdIDMiIHg9IjE1MCIgeT0iNTAiIHhsaW5rOmhyZWY9IiNpbWFnZSIv%0D%0APgogIDx1c2UgaWQ9IuWbvuWxgl8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuWbvuWxgiAxIOaLt+i0%0D%0AnSA0IiB4PSIxMDAiIHk9IjEwMCIgeGxpbms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+%0D%0A5bGCXzFf5ou36LSdXzUiIGRhdGEtbmFtZT0i5Zu+5bGCIDEg5ou36LSdIDUiIHk9IjEwMCIgeGxp%0D%0Abms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzFf5ou36LSdXzciIGRhdGEtbmFt%0D%0AZT0i5Zu+5bGCIDEg5ou36LSdIDciIHg9IjE1MCIgeT0iMTUwIiB4bGluazpocmVmPSIjaW1hZ2Ui%0D%0ALz4KICA8dXNlIGlkPSLlm77lsYJfMV/mi7fotJ1fNiIgZGF0YS1uYW1lPSLlm77lsYIgMSDmi7fo%0D%0AtJ0gNiIgeD0iNTAiIHk9IjE1MCIgeGxpbms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+%0D%0A5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHg9IjUwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIv%0D%0APgogIDx1c2UgaWQ9IuWbvuWxgl8yX+aLt+i0nSIgZGF0YS1uYW1lPSLlm77lsYIgMiDmi7fotJ0i%0D%0AIHg9IjE1MCIgeGxpbms6aHJlZj0iI2ltYWdlLTIiLz4KICA8dXNlIGlkPSLlm77lsYJfMl/mi7fo%0D%0AtJ1fMiIgZGF0YS1uYW1lPSLlm77lsYIgMiDmi7fotJ0gMiIgeD0iMTUwIiB5PSIxMDAiIHhsaW5r%0D%0AOmhyZWY9IiNpbWFnZS0yIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzJf5ou36LSdXzciIGRhdGEtbmFt%0D%0AZT0i5Zu+5bGCIDIg5ou36LSdIDciIHg9IjEwMCIgeT0iMTUwIiB4bGluazpocmVmPSIjaW1hZ2Ut%0D%0AMiIvPgogIDx1c2UgaWQ9IuWbvuWxgl8yX+aLt+i0nV8zIiBkYXRhLW5hbWU9IuWbvuWxgiAyIOaL%0D%0At+i0nSAzIiB4PSI1MCIgeT0iMTAwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIvPgogIDx1c2UgaWQ9%0D%0AIuWbvuWxgl8yX+aLt+i0nV82IiBkYXRhLW5hbWU9IuWbvuWxgiAyIOaLt+i0nSA2IiB5PSIxNTAi%0D%0AIHhsaW5rOmhyZWY9IiNpbWFnZS0yIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzJf5ou36LSdXzQiIGRh%0D%0AdGEtbmFtZT0i5Zu+5bGCIDIg5ou36LSdIDQiIHk9IjUwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIv%0D%0APgogIDx1c2UgaWQ9IuWbvuWxgl8yX+aLt+i0nV81IiBkYXRhLW5hbWU9IuWbvuWxgiAyIOaLt+i0%0D%0AnSA1IiB4PSIxMDAiIHk9IjUwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIvPgogIDx0ZXh0IGlkPSJf%0D%0ANTBfNTAiIGRhdGEtbmFtZT0iNTAqNTAiIGNsYXNzPSJjbHMtMSIgeD0iNjAuMDkiIHk9IjEzMS4x%0D%0ANzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0IGlkPSJfNTBfNTBf5ou36LSdIiBkYXRhLW5hbWU9IjUw%0D%0AKjUwIOaLt+i0nSIgY2xhc3M9ImNscy0xIiB4PSIxMDkuMDkiIHk9IjgwLjE3NCI+NTAqNTA8L3Rl%0D%0AeHQ+CiAgPHRleHQgaWQ9Il81MF81MF/mi7fotJ1fMiIgZGF0YS1uYW1lPSI1MCo1MCDmi7fotJ0g%0D%0AMiIgY2xhc3M9ImNscy0xIiB4PSI4LjA5IiB5PSI4MC4xNzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0%0D%0AIGlkPSJfNTBfNTBf5ou36LSdXzMiIGRhdGEtbmFtZT0iNTAqNTAg5ou36LSdIDMiIGNsYXNzPSJj%0D%0AbHMtMSIgeD0iMTYxLjA5IiB5PSIxMzAuMTc0Ij41MCo1MDwvdGV4dD4KICA8dGV4dCBpZD0iXzUw%0D%0AXzUwX+aLt+i0nV80IiBkYXRhLW5hbWU9IjUwKjUwIOaLt+i0nSA0IiBjbGFzcz0iY2xzLTEiIHg9%0D%0AIjU4LjA5IiB5PSIzMC4xNzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0IGlkPSJfNTBfNTBf5ou36LSd%0D%0AXzUiIGRhdGEtbmFtZT0iNTAqNTAg5ou36LSdIDUiIGNsYXNzPSJjbHMtMSIgeD0iMTU4LjA5IiB5%0D%0APSIzMC4xNzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0IGlkPSJfNTBfNTBf5ou36LSdXzYiIGRhdGEt%0D%0AbmFtZT0iNTAqNTAg5ou36LSdIDYiIGNsYXNzPSJjbHMtMSIgeD0iMTEwLjA5IiB5PSIxODAuMTc0%0D%0AIj41MCo1MDwvdGV4dD4KICA8dGV4dCBpZD0iXzUwXzUwX+aLt+i0nV83IiBkYXRhLW5hbWU9IjUw%0D%0AKjUwIOaLt+i0nSA3IiBjbGFzcz0iY2xzLTEiIHg9IjkuMDkiIHk9IjE4MC4xNzQiPjUwKjUwPC90%0D%0AZXh0PgogIDxjaXJjbGUgaWQ9IuakreWchl8xIiBkYXRhLW5hbWU9IuakreWchiAxIiBjbGFzcz0i%0D%0AY2xzLTIiIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjIiLz4KICA8cmVjdCBpZD0i55+p5b2iXzEiIGRh%0D%0AdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMiIgeT0iMTk2IiB3aWR0aD0iNCIgaGVpZ2h0%0D%0APSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nSIgZGF0YS1uYW1lPSLnn6nlvaIgMSDm%0D%0Ai7fotJ0iIGNsYXNzPSJjbHMtMiIgeD0iOTgiIHk9IjE5NiIgd2lkdGg9IjQiIGhlaWdodD0iNCIv%0D%0APgogIDxyZWN0IGlkPSLnn6nlvaJfMV/mi7fotJ1fMyIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fo%0D%0AtJ0gMyIgY2xhc3M9ImNscy0yIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9Iuef%0D%0AqeW9ol8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA0IiBjbGFzcz0iY2xz%0D%0ALTIiIHk9Ijk4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aL%0D%0At+i0nV81IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA1IiBjbGFzcz0iY2xzLTIiIHg9IjE5%0D%0ANiIgeT0iOTgiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz4KICA8cmVjdCBpZD0i55+p5b2iXzFf5ou3%0D%0A6LSdXzYiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDYiIGNsYXNzPSJjbHMtMiIgeD0iMTk2%0D%0AIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV83IiBk%0D%0AYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA3IiBjbGFzcz0iY2xzLTIiIHg9Ijk4IiB3aWR0aD0i%0D%0ANCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV8yIiBkYXRhLW5hbWU9%0D%0AIuefqeW9oiAxIOaLt+i0nSAyIiBjbGFzcz0iY2xzLTIiIHg9IjE5NiIgeT0iMTk2IiB3aWR0aD0i%0D%0ANCIgaGVpZ2h0PSI0Ii8+Cjwvc3ZnPgo=') no-repeat;
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }
        .intro-vb {
            position: relative;
            display: inline-block;
            height: 50px;
            width: 100px;
            border: 1px solid rgb(79, 195, 247);
            background: rgba(255, 255, 255, 0.5);
            box-sizing: border-box;
            vertical-align: bottom;
        }

        .intro-vb i {
            position: absolute;
            color: rgb(79, 195, 247);
            line-height: 16px;
            bottom: 2px;
            right: 2px;
        }
        p{
            word-break: break-word;
        }
        p strong{
            color: rgb(226, 46, 196);
        }
        .preview {
            opacity: 0.5;
        }
    </style>
    <h3 class="title">viewBox</h3>
    <div class="svg-container" id="container">
        <div class="svg-rect"></div>
        <div class="svg-vb"><i>viewBox</i></div>
        <svg class="svg js-vb" viewBox="5 5 200 200" height="600" width="600" preserveAspectRatio="xMidYMid meet">
            <!-- <image class="js-fake-vb" xlink:href="./da.svg" x="5" y="5" width="200" height="200" /> -->
            <!-- <rect x="5" y="5" width="200" height="200" fill="rgba(2, 166, 242, 0.5)"/> -->
            <!-- <rect x="5" y="5" class="js-fake-bg-vb" width="200" height="200" fill="rgba(222, 10, 242, 0.5)"/> -->
        </svg>
    </div>
    <div class="svg-container" style="margin-top: 20px;">
            <svg class="svg js-vb " viewBox="5 5 200 200" height="600" width="600" preserveAspectRatio="xMidYMid meet">
                <image class="preview" xlink:href="%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTgwIiBoZWlnaHQ9IjU4MCIgdmlld0Jv%0D%0AeD0iMCAwIDU4MCA1ODAiPgo8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAg%0D%0AICBmaWxsOiAjOTk5OwogICAgICB9CiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogI2NiY2Jj%0D%0AYjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgICAgIDxyZWN0ICBjbGFzcz0iY2xz%0D%0ALTIiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz4KICA8cmVjdCBpZD0i55+p5b2iXzEiIGRh%0D%0AdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+%0D%0ACiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nSIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0i%0D%0AIGNsYXNzPSJjbHMtMSIgeT0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzIiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDIiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB5PSI1NzAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgogIDxyZWN0%0D%0AIGlkPSLnn6nlvaJfMV/mi7fotJ1fMyIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0gMyIgY2xh%0D%0Ac3M9ImNscy0xIiB4PSIyODUiIHk9IjU3MCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+CiAgPHJl%0D%0AY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA0IiBj%0D%0AbGFzcz0iY2xzLTEiIHg9IjI4NSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8%0D%0AcmVjdCBpZD0i55+p5b2iXzFf5ou36LSdXzgiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDgi%0D%0AIGNsYXNzPSJjbHMtMSIgeD0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzUiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDUiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p%0D%0A5b2iXzFf5ou36LSdXzYiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDYiIGNsYXNzPSJjbHMt%0D%0AMSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p5b2iXzFf%0D%0A5ou36LSdXzciIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDciIGNsYXNzPSJjbHMtMSIgeD0i%0D%0ANTcwIiB5PSIyODUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgo8L3N2Zz4K" x="5" y="5" height="580" width="580" />
                <image class="preview" xlink:href="%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0Jv%0D%0AeD0iMCAwIDIwMCAyMDAiPgo8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAg%0D%0AICBmb250LXNpemU6IDEycHg7CiAgICAgICAgZmlsbDogIzRDQUY1MDsKICAgICAgICBmb250LWZh%0D%0AbWlseTogIkFkb2JlIEhlaXRpIFN0ZCI7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAg%0D%0AZmlsbDogI2U0MDA3ZjsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyZWN0IGlkPSJpbWFnZSIg%0D%0AIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iIzRDQUY1MCIvPgogICAgPHJlY3QgaWQ9Imlt%0D%0AYWdlLTIiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNlOGY1ZTkiLz4KICA8L2RlZnM+%0D%0ACiAgPHVzZSBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhsaW5rOmhyZWY9IiNp%0D%0AbWFnZSIvPgogIDx1c2UgaWQ9IuWbvuWxgl8xX+aLt+i0nSIgZGF0YS1uYW1lPSLlm77lsYIgMSDm%0D%0Ai7fotJ0iIHg9IjEwMCIgeGxpbms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzFf%0D%0A5ou36LSdXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEg5ou36LSdIDIiIHg9IjUwIiB5PSI1MCIgeGxp%0D%0Abms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzFf5ou36LSdXzMiIGRhdGEtbmFt%0D%0AZT0i5Zu+5bGCIDEg5ou36LSdIDMiIHg9IjE1MCIgeT0iNTAiIHhsaW5rOmhyZWY9IiNpbWFnZSIv%0D%0APgogIDx1c2UgaWQ9IuWbvuWxgl8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuWbvuWxgiAxIOaLt+i0%0D%0AnSA0IiB4PSIxMDAiIHk9IjEwMCIgeGxpbms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+%0D%0A5bGCXzFf5ou36LSdXzUiIGRhdGEtbmFtZT0i5Zu+5bGCIDEg5ou36LSdIDUiIHk9IjEwMCIgeGxp%0D%0Abms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzFf5ou36LSdXzciIGRhdGEtbmFt%0D%0AZT0i5Zu+5bGCIDEg5ou36LSdIDciIHg9IjE1MCIgeT0iMTUwIiB4bGluazpocmVmPSIjaW1hZ2Ui%0D%0ALz4KICA8dXNlIGlkPSLlm77lsYJfMV/mi7fotJ1fNiIgZGF0YS1uYW1lPSLlm77lsYIgMSDmi7fo%0D%0AtJ0gNiIgeD0iNTAiIHk9IjE1MCIgeGxpbms6aHJlZj0iI2ltYWdlIi8+CiAgPHVzZSBpZD0i5Zu+%0D%0A5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiIHg9IjUwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIv%0D%0APgogIDx1c2UgaWQ9IuWbvuWxgl8yX+aLt+i0nSIgZGF0YS1uYW1lPSLlm77lsYIgMiDmi7fotJ0i%0D%0AIHg9IjE1MCIgeGxpbms6aHJlZj0iI2ltYWdlLTIiLz4KICA8dXNlIGlkPSLlm77lsYJfMl/mi7fo%0D%0AtJ1fMiIgZGF0YS1uYW1lPSLlm77lsYIgMiDmi7fotJ0gMiIgeD0iMTUwIiB5PSIxMDAiIHhsaW5r%0D%0AOmhyZWY9IiNpbWFnZS0yIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzJf5ou36LSdXzciIGRhdGEtbmFt%0D%0AZT0i5Zu+5bGCIDIg5ou36LSdIDciIHg9IjEwMCIgeT0iMTUwIiB4bGluazpocmVmPSIjaW1hZ2Ut%0D%0AMiIvPgogIDx1c2UgaWQ9IuWbvuWxgl8yX+aLt+i0nV8zIiBkYXRhLW5hbWU9IuWbvuWxgiAyIOaL%0D%0At+i0nSAzIiB4PSI1MCIgeT0iMTAwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIvPgogIDx1c2UgaWQ9%0D%0AIuWbvuWxgl8yX+aLt+i0nV82IiBkYXRhLW5hbWU9IuWbvuWxgiAyIOaLt+i0nSA2IiB5PSIxNTAi%0D%0AIHhsaW5rOmhyZWY9IiNpbWFnZS0yIi8+CiAgPHVzZSBpZD0i5Zu+5bGCXzJf5ou36LSdXzQiIGRh%0D%0AdGEtbmFtZT0i5Zu+5bGCIDIg5ou36LSdIDQiIHk9IjUwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIv%0D%0APgogIDx1c2UgaWQ9IuWbvuWxgl8yX+aLt+i0nV81IiBkYXRhLW5hbWU9IuWbvuWxgiAyIOaLt+i0%0D%0AnSA1IiB4PSIxMDAiIHk9IjUwIiB4bGluazpocmVmPSIjaW1hZ2UtMiIvPgogIDx0ZXh0IGlkPSJf%0D%0ANTBfNTAiIGRhdGEtbmFtZT0iNTAqNTAiIGNsYXNzPSJjbHMtMSIgeD0iNjAuMDkiIHk9IjEzMS4x%0D%0ANzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0IGlkPSJfNTBfNTBf5ou36LSdIiBkYXRhLW5hbWU9IjUw%0D%0AKjUwIOaLt+i0nSIgY2xhc3M9ImNscy0xIiB4PSIxMDkuMDkiIHk9IjgwLjE3NCI+NTAqNTA8L3Rl%0D%0AeHQ+CiAgPHRleHQgaWQ9Il81MF81MF/mi7fotJ1fMiIgZGF0YS1uYW1lPSI1MCo1MCDmi7fotJ0g%0D%0AMiIgY2xhc3M9ImNscy0xIiB4PSI4LjA5IiB5PSI4MC4xNzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0%0D%0AIGlkPSJfNTBfNTBf5ou36LSdXzMiIGRhdGEtbmFtZT0iNTAqNTAg5ou36LSdIDMiIGNsYXNzPSJj%0D%0AbHMtMSIgeD0iMTYxLjA5IiB5PSIxMzAuMTc0Ij41MCo1MDwvdGV4dD4KICA8dGV4dCBpZD0iXzUw%0D%0AXzUwX+aLt+i0nV80IiBkYXRhLW5hbWU9IjUwKjUwIOaLt+i0nSA0IiBjbGFzcz0iY2xzLTEiIHg9%0D%0AIjU4LjA5IiB5PSIzMC4xNzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0IGlkPSJfNTBfNTBf5ou36LSd%0D%0AXzUiIGRhdGEtbmFtZT0iNTAqNTAg5ou36LSdIDUiIGNsYXNzPSJjbHMtMSIgeD0iMTU4LjA5IiB5%0D%0APSIzMC4xNzQiPjUwKjUwPC90ZXh0PgogIDx0ZXh0IGlkPSJfNTBfNTBf5ou36LSdXzYiIGRhdGEt%0D%0AbmFtZT0iNTAqNTAg5ou36LSdIDYiIGNsYXNzPSJjbHMtMSIgeD0iMTEwLjA5IiB5PSIxODAuMTc0%0D%0AIj41MCo1MDwvdGV4dD4KICA8dGV4dCBpZD0iXzUwXzUwX+aLt+i0nV83IiBkYXRhLW5hbWU9IjUw%0D%0AKjUwIOaLt+i0nSA3IiBjbGFzcz0iY2xzLTEiIHg9IjkuMDkiIHk9IjE4MC4xNzQiPjUwKjUwPC90%0D%0AZXh0PgogIDxjaXJjbGUgaWQ9IuakreWchl8xIiBkYXRhLW5hbWU9IuakreWchiAxIiBjbGFzcz0i%0D%0AY2xzLTIiIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjIiLz4KICA8cmVjdCBpZD0i55+p5b2iXzEiIGRh%0D%0AdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMiIgeT0iMTk2IiB3aWR0aD0iNCIgaGVpZ2h0%0D%0APSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nSIgZGF0YS1uYW1lPSLnn6nlvaIgMSDm%0D%0Ai7fotJ0iIGNsYXNzPSJjbHMtMiIgeD0iOTgiIHk9IjE5NiIgd2lkdGg9IjQiIGhlaWdodD0iNCIv%0D%0APgogIDxyZWN0IGlkPSLnn6nlvaJfMV/mi7fotJ1fMyIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fo%0D%0AtJ0gMyIgY2xhc3M9ImNscy0yIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9Iuef%0D%0AqeW9ol8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA0IiBjbGFzcz0iY2xz%0D%0ALTIiIHk9Ijk4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aL%0D%0At+i0nV81IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA1IiBjbGFzcz0iY2xzLTIiIHg9IjE5%0D%0ANiIgeT0iOTgiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz4KICA8cmVjdCBpZD0i55+p5b2iXzFf5ou3%0D%0A6LSdXzYiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDYiIGNsYXNzPSJjbHMtMiIgeD0iMTk2%0D%0AIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV83IiBk%0D%0AYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA3IiBjbGFzcz0iY2xzLTIiIHg9Ijk4IiB3aWR0aD0i%0D%0ANCIgaGVpZ2h0PSI0Ii8+CiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV8yIiBkYXRhLW5hbWU9%0D%0AIuefqeW9oiAxIOaLt+i0nSAyIiBjbGFzcz0iY2xzLTIiIHg9IjE5NiIgeT0iMTk2IiB3aWR0aD0i%0D%0ANCIgaGVpZ2h0PSI0Ii8+Cjwvc3ZnPgo=" x="5" y="5" height="200" width="200" />
            </svg>
    </div>
    <div class="controls" id="controls">
        <h4>viewBox 大小</h4>
        <input type="range" step="10" class="js-vb-range" max="580" min="10" value="200">
        <p>viewBox: <strong class="js-val">5 5 200 200</strong></p>
        <p>preserveAspectRatio: <strong>xMidYMid meet</strong> </p>
        <div class="intro">
                <h4>图例</h4>
                <p style="clear: both">
                    <img src="%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTgwIiBoZWlnaHQ9IjU4MCIgdmlld0Jv%0D%0AeD0iMCAwIDU4MCA1ODAiPgo8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAg%0D%0AICBmaWxsOiAjOTk5OwogICAgICB9CiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogIzI4Mjgy%0D%0AODsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgICAgIDxyZWN0ICBjbGFzcz0iY2xz%0D%0ALTIiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz4KICA8cmVjdCBpZD0i55+p5b2iXzEiIGRh%0D%0AdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+%0D%0ACiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nSIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0i%0D%0AIGNsYXNzPSJjbHMtMSIgeT0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzIiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDIiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB5PSI1NzAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgogIDxyZWN0%0D%0AIGlkPSLnn6nlvaJfMV/mi7fotJ1fMyIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0gMyIgY2xh%0D%0Ac3M9ImNscy0xIiB4PSIyODUiIHk9IjU3MCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+CiAgPHJl%0D%0AY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA0IiBj%0D%0AbGFzcz0iY2xzLTEiIHg9IjI4NSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8%0D%0AcmVjdCBpZD0i55+p5b2iXzFf5ou36LSdXzgiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDgi%0D%0AIGNsYXNzPSJjbHMtMSIgeD0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzUiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDUiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p%0D%0A5b2iXzFf5ou36LSdXzYiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDYiIGNsYXNzPSJjbHMt%0D%0AMSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p5b2iXzFf%0D%0A5ou36LSdXzciIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDciIGNsYXNzPSJjbHMtMSIgeD0i%0D%0ANTcwIiB5PSIyODUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgo8L3N2Zz4K" alt="dd" height="100" width="100"> 表示 <strong>viewport</strong>
                    <span class="intro-vb"><i>viewBox</i></span> 表示 <strong>viewBox</strong>
                </p>
                <p>
                </p>
                <p> <i style="color:brown; margin-right:8px;">viewport</i>图中的 9
                    个点分别表示：<i>xMinYMin</i>、<i>xMidYMin</i>、<i>xMaxYMin</i>、<i>xMinYMid</i>、<i>xMidYMid</i>、<i>xMaxYMid</i>、<i>xMinYMax</i>、<i>xMidYMax</i>、<i>xMaxYMax</i>
                </p>
            </div>
    </div>
    <!-- <div class="intro">
        <p>
            <img src="%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTgwIiBoZWlnaHQ9IjU4MCIgdmlld0Jv%0D%0AeD0iMCAwIDU4MCA1ODAiPgo8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAg%0D%0AICBmaWxsOiAjOTk5OwogICAgICB9CiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogIzI4Mjgy%0D%0AODsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgICAgIDxyZWN0ICBjbGFzcz0iY2xz%0D%0ALTIiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz4KICA8cmVjdCBpZD0i55+p5b2iXzEiIGRh%0D%0AdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+%0D%0ACiAgPHJlY3QgaWQ9IuefqeW9ol8xX+aLt+i0nSIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0i%0D%0AIGNsYXNzPSJjbHMtMSIgeT0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzIiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDIiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB5PSI1NzAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgogIDxyZWN0%0D%0AIGlkPSLnn6nlvaJfMV/mi7fotJ1fMyIgZGF0YS1uYW1lPSLnn6nlvaIgMSDmi7fotJ0gMyIgY2xh%0D%0Ac3M9ImNscy0xIiB4PSIyODUiIHk9IjU3MCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+CiAgPHJl%0D%0AY3QgaWQ9IuefqeW9ol8xX+aLt+i0nV80IiBkYXRhLW5hbWU9IuefqeW9oiAxIOaLt+i0nSA0IiBj%0D%0AbGFzcz0iY2xzLTEiIHg9IjI4NSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8%0D%0AcmVjdCBpZD0i55+p5b2iXzFf5ou36LSdXzgiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDgi%0D%0AIGNsYXNzPSJjbHMtMSIgeD0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBp%0D%0AZD0i55+p5b2iXzFf5ou36LSdXzUiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDUiIGNsYXNz%0D%0APSJjbHMtMSIgeD0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p%0D%0A5b2iXzFf5ou36LSdXzYiIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDYiIGNsYXNzPSJjbHMt%0D%0AMSIgeT0iMjg1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICA8cmVjdCBpZD0i55+p5b2iXzFf%0D%0A5ou36LSdXzciIGRhdGEtbmFtZT0i55+p5b2iIDEg5ou36LSdIDciIGNsYXNzPSJjbHMtMSIgeD0i%0D%0ANTcwIiB5PSIyODUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPgo8L3N2Zz4K" alt="dd" height="80" width="80"> 表示 <strong>viewport</strong>
            <img src="./da.svg" alt="dd" height="80" width="120"> 表示 <strong>viewBox</strong>
        </p>
        <p>
        </p>
        <p>图中的 9 个点表示：<i>xMinYMin</i>、<i>xMidYMin</i>、<i>xMaxYMin</i>、<i>xMinYMid</i>、<i>xMidYMid</i>、<i>xMaxYMid</i>、<i>xMinYMax</i>、<i>xMidYMax</i>、<i>xMaxYMax</i></p>
    </div> -->

    <script>
        const viewBoxElements = document.querySelectorAll('.js-vb');
        const viewBoxFakeElement = document.querySelector('.js-fake-vb');
        const viewBoxFakeBgElement = document.querySelector('.svg-vb');
        const rangeOfViewBoxSize = document.querySelector('.js-vb-range');
        const viewBoxValue = document.querySelector('.js-val');
        rangeOfViewBoxSize.addEventListener('input', function(){
            // console.log(rangeOfViewBoxSize.value,  viewBoxElement.viewBox)
            viewBoxElements.forEach(i => i.setAttribute('viewBox', `5 5 ${rangeOfViewBoxSize.value} ${rangeOfViewBoxSize.value}`))
            // viewBoxElement.setAttribute('viewBox', `5 5 ${rangeOfViewBoxSize.value} ${rangeOfViewBoxSize.value}`);
            viewBoxFakeBgElement.style.width = rangeOfViewBoxSize.value + 'px';
            viewBoxFakeBgElement.style.height = rangeOfViewBoxSize.value + 'px';
            viewBoxValue.innerHTML = `5 5 ${rangeOfViewBoxSize.value} ${rangeOfViewBoxSize.value}`;
            // viewBoxFakeElement.setAttribute('width', rangeOfViewBoxSize.value);
            // viewBoxFakeElement.setAttribute('height', rangeOfViewBoxSize.value / 1.5);
        }, false);
    </script>
</body>

</html>